<link rel="stylesheet" href="<?php echo APP_TEMPLATES_URL;?>/css/public.css" />
<script src="<?php echo APP_TEMPLATES_URL;?>/js/common.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="<?php echo APP_TEMPLATES_URL;?>/css/checkbix.min.css" />
<script src="<?php echo APP_TEMPLATES_URL;?>/js/checkbix.min.js" type="text/javascript" charset="utf-8"></script>

<style>
    body,
    html {
        background: #F4F4F4 !important;
    }

    .indexm {
        display: none;
    }
    label{font-size: 16px;}
</style>

<script type="text/javascript">
    Checkbix.init();
    $(function(){
        // 所有复选(:checkbox)框点击事件
        $("input[name=boxlist]").click(function() {
            $("input[name=boxlist]").each(function() {
                $(this).attr("checked", false);
            });
            $(this).attr("checked", true);
        });
    });
    function hideDiv(){
        $(".mui-popup-backdrop").hide();
        $(".mui-popup-in").hide();
    }
    function setmoney(){
        $('#pdc_amount').val(<?php echo $output['available_predeposit']; ?>);
    }
    function next_step(){
        var a_money = <?php echo $output['available_predeposit']; ?>;
        var pdr_amount = $.trim($("#pdc_amount").val());
        var fix_amountTest=/^(([1-9]\d*)|\d)(\.\d{1,2})?$/;
        if(pdr_amount==''){
            alert("请正确输入提现金额");
            return;
        }else if(fix_amountTest.test(pdr_amount)==false || pdr_amount<=0 || pdr_amount>a_money){
            alert("请正确输入提现金额");
            return;
        }
        if($('#mycheckbox3').attr('checked')){
            $('#pdc_bank_name').val('银行卡');
        }else if($('#mycheckbox2').attr('checked')){
            $('#pdc_bank_name').val('支付宝');
        }else{
            alert('请选择收款方式');
            return;
        }
        if($.trim($("#pdc_bank_user").val())==''){
            alert('请输入开户人姓名');
            return;
        }
        if($.trim($("#pdc_bank_no").val())==''){
            alert('请输入收款账号');
            return;
        }
        $(".mui-popup-backdrop").show();
        $(".mui-popup-in").show();
        /*
         $.get("index.php?act=pay&op=check_pd_pwd", {'password':$('#password').val()}, function(data){
         if (data == '3') {
         alert('请在个人资料->账户安全设置支付密码')
         }
         });
         */
    }

    function tocash(){
        if($.trim($("#password").val())==''){
            alert('请输入交易密码');
            return;
        }
        $.get("index.php?act=pay&op=check_pd_pwd", {'password':$('#password').val()}, function(data){
            if (data == '1') {
                $("#cash_form").submit();
            }else {
                $('#password').val('');
                alert('交易密码错误');
            }
        });
    }

    function go_back(){
        window.location.href = 'index.php?act=predeposit&op=moneybag';
    }

</script>


<!-- 导航 -->
<div class="mui-bar mui-bar-nav bj">
    <button class="mui-btn mui-btn-link mui-btn-nav mui-pull-left zys">
        <img style=" max-width: 50%; vertical-align: middle;" src="<?php echo APP_TEMPLATES_URL;?>/images/back.png" onclick="go_back()" />
    </button>

    <button class="mui-btn mui-btn-link mui-btn-nav mui-pull-right" style="margin-right: 16px;    position: relative;
    z-index: 999;">
        <a href="index.php?act=predeposit&op=cash_outlog">提现记录</a>
    </button>
    <h1 class="mui-title"><label style="font-size: 22px;vertical-align: middle;">提现</label></h1>
</div>

<form method="post" id="cash_form" action="index.php?act=predeposit&op=pd_cash_add">
    <input type="hidden" name="form_submit" value="ok" />
    <input type="hidden" name="pdc_bank_name" id="pdc_bank_name" value="" />

    <ul class="across">

        <li class="side notactive">
            <div class="countone notone" style="border: 0;">
                <label>提现金额</label>
            </div>
        </li>
        <li class="side notactive">
            <div class="countone notone" style="    padding-bottom: 20px;" >
                <label style="font-size: 32px;font-weight: bold;width: 42px;">￥</label>
                <label>
                    <input type="text" style="font-size: 16px; width: 100%;vertical-align: middle;border: 0; height: 45px;" name="pdc_amount" id="pdc_amount"/>
                </label>
            </div>
        </li>
        <li class="side notactive">
            <div class="countone notone">
                <label>可提现余额：<?php echo $output['available_predeposit']; ?>元，<label style="color: #f0b33e;" onclick="setmoney()">全部提现</label></label>
            </div>
        </li>
    </ul>
    <div style="height: 10px; background: #f5f5f5; clear: both; border-bottom: 1px solid #EEEEEE;"></div>
    <ul class="across">
        <li class="side notactive" style="background:#f9f9f9;">
            <div class="countone notone"  style="border: 0;">
                <a href="javascript:();">
                    <label>提现到</label>
                </a>
            </div>
        </li>
        <li class="side notactive">
            <div class="countone notone">
                <a href="javascript:();">
                    <label for="mycheckbox3"><img style="width: 35px;vertical-align: middle; margin-right: 10px;" src="<?php echo APP_TEMPLATES_URL;?>/images/z2.png" />银行卡</label>
                    <label style="text-align: right;">
                        &nbsp;<input id="mycheckbox3" type="checkbox" class="checkbix" data-shape="circled" name="boxlist" data-color="orange" data-text="" value="8">
                    </label>
                </a>
            </div>
        </li>
        <li class="side notactive">
            <div class="countone notone">
                <a href="javascript:();">
                    <label for="mycheckbox2"><img style="    width: 30px;vertical-align: middle; margin-right: 10px;" src="<?php echo APP_TEMPLATES_URL;?>/images/z3.png" />&nbsp;支付宝</label>
                    <label style="text-align: right;">
                        &nbsp;<input id="mycheckbox2" type="checkbox" class="checkbix" data-shape="circled" name="boxlist" data-color="orange" data-text="" value="8">
                    </label>
                </a>
            </div>
        </li>
    </ul>

    <div style="height: 10px; background: #f5f5f5; clear: both; border-bottom: 1px solid #EEEEEE;"></div>

    <ul class="across">
        <li class="side notactive">
            <div class="countone notone">
                <a href="javascript:">
                    <label style="    width: 48px;">姓名：</label>
                    <label style="color: #999;">
                        <input type="text" id="pdc_bank_user" name="pdc_bank_user" style="font-size: 14px; width: 100%;vertical-align: middle;border: 0; height: 45px;" placeholder="请输入开户人姓名" />

                    </label>
                </a>
            </div>
        </li>
        <li class="side notactive">
            <div class="countone notone">
                <a>
                    <label style="    width: 48px;">账号：</label>
                    <label style=" color: #999;">
                        <input type="text" id="pdc_bank_no" name="pdc_bank_no" style="font-size: 14px; width: 100%;vertical-align: middle;border: 0; height: 45px;" placeholder="请输入银行卡号或支付账号" />

                    </label>
                </a>
            </div>
        </li>
    </ul>

    <style>
        .loginbnt {
            font-size: 20px;
            line-height: 50px;
            color: #000000;
            background: #f0b33e;
            float: left;
            text-align: center;
            width: 100%;
        }
        .loginbnt:active{
            background: #d8b167;
            color: #333333 !important;
        }
        .loginbnt:hover{color: #000000;}
    </style>
    <div style="clear: both;"></div>
    <p style="text-align: center; margin-top: 20px; color: #333; "></p>
    <div style="padding: 20px 15px; clear: both;">
        <table width="100%">
            <tr>
                <td>
                    <a href="#" class="loginbnt" onclick="next_step()">下一步</a>
                </td>
            </tr>
        </table>
    </div>


    <style>
        .mui-popup-backdrop {
            position: fixed;
            z-index: 998;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            -webkit-transition-duration: 400ms;
            transition-duration: 400ms;
            opacity: 0;
            background: rgba(0, 0, 0, .4)
        }

        .mui-popup-backdrop.mui-active {
            opacity: 1
        }

        .mui-popup {
            position: fixed;
            z-index: 10000;
            top: 50%;
            left: 50%;
            display: none;
            overflow: hidden;
            width: 270px;
            -webkit-transition-property: -webkit-transform, opacity;
            transition-property: transform, opacity;
            -webkit-transform: translate3d(-50%, -50%, 0) scale(1.185);
            transform: translate3d(-50%, -50%, 0) scale(1.185);
            text-align: center;
            opacity: 0;
            color: #000;
            border-radius: 13px
        }

        .mui-popup.mui-popup-in {
            display: block;
            -webkit-transition-duration: 400ms;
            transition-duration: 400ms;
            -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
            transform: translate3d(-50%, -50%, 0) scale(1);
            opacity: 1
        }

        .mui-popup.mui-popup-out {
            -webkit-transition-duration: 400ms;
            transition-duration: 400ms;
            -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
            transform: translate3d(-50%, -50%, 0) scale(1);
            opacity: 0
        }

        .mui-popup-inner {
            position: relative;
            padding: 15px;
            border-radius: 13px 13px 0 0;
            background: rgba(255, 255, 255, .95)
        }

        .mui-popup-inner:after {
            position: absolute;
            z-index: 15;
            top: auto;
            right: auto;
            bottom: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 1px;
            content: '';
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
            background-color: rgba(0, 0, 0, .2)
        }

        .mui-popup-title {
            font-size: 18px;
            font-weight: 500;
            text-align: center;
            padding-top: 10px;
        }

        .mui-popup-title+.mui-popup-text {
            font-size: 14px;
            margin-top: 10px
        }

        .mui-popup-buttons {
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            height: 44px;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center
        }

        .mui-popup-button {
            font-size: 17px;
            line-height: 44px;
            position: relative;
            display: block;
            overflow: hidden;
            box-sizing: border-box;
            width: 100%;
            height: 44px;
            padding: 0 5px;
            cursor: pointer;
            text-align: center;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #000;
            background: rgba(255, 255, 255, .95);
            -webkit-box-flex: 1
        }

        .mui-popup-button:after {
            position: absolute;
            z-index: 15;
            top: 0;
            right: 0;
            bottom: auto;
            left: auto;
            display: block;
            width: 1px;
            height: 100%;
            content: '';
            -webkit-transform: scaleX(.5);
            transform: scaleX(.5);
            -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
            background-color: rgba(0, 0, 0, .2)
        }

        .mui-popup-button:first-child {
            border-radius: 0 0 0 13px
        }

        .mui-popup-button:first-child:last-child {
            border-radius: 0 0 13px 13px
        }

        .mui-popup-button:last-child {
            border-radius: 0 0 13px
        }

        .mui-popup-button:last-child:after {
            display: none
        }

        .mui-popup-button.mui-popup-button-bold {
            font-weight: 600
        }

        .mui-popup-input input {
            font-size: 14px;
            width: 100%;
            height: 26px;
            margin: 0;
            margin-top: 15px;
            padding: 0 5px;
            border: 1px solid rgba(0, 0, 0, .3);
            border-radius: 0;
            background: #fff
        }

        .che {
            display: none;
        }
    </style>
    <div class="mui-popup-backdrop mui-active" style="display: none;"></div>
    <div class="mui-popup mui-popup-in" style="display: none;">
        <div class="mui-popup-inner">
            <div class="mui-popup-title">请输入交易密码申请提现</div>
            <div class="mui-popup-text"><input type="password" name="password" id="password" placeholder="请输入交易密码" style="width: 90%;height: 40px;font-size: 14px;"></div>
        </div>
        <div class="mui-popup-buttons"><span class="mui-popup-button" onclick="hideDiv();">取消</span>
            <span class="mui-popup-button mui-popup-button-bold" onclick="tocash();">确定</span></div>
    </div>
</form>